<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>0024: Switch and LightSwitch | gtkDcoding</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="0024: Switch and LightSwitch" />
<meta name="author" content="Ron Tarrant" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="How to use a GTK Switch widget to simulate a light switch - a D language tutorial." />
<meta property="og:description" content="How to use a GTK Switch widget to simulate a light switch - a D language tutorial." />
<link rel="canonical" href="http://localhost:4000/posts/0024-switch-and-light-switch.html" />
<meta property="og:url" content="http://localhost:4000/posts/0024-switch-and-light-switch.html" />
<meta property="og:site_name" content="gtkDcoding" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2019-04-05T00:00:00-04:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="0024: Switch and LightSwitch" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Ron Tarrant"},"dateModified":"2019-04-05T00:00:00-04:00","datePublished":"2019-04-05T00:00:00-04:00","description":"How to use a GTK Switch widget to simulate a light switch - a D language tutorial.","headline":"0024: Switch and LightSwitch","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/0024-switch-and-light-switch.html"},"url":"http://localhost:4000/posts/0024-switch-and-light-switch.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="../assets/main.css">
  <link rel="stylesheet" href="../css/style.css" /><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="gtkDcoding" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="../">gtkDcoding</a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="../about.html">About</a><a class="page-link" href="../index-reverse.html">Posts in Date Order</a><a class="page-link" href="../topics.html">Blog Posts by Topic</a></div>
      </nav></div>
</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
	<header class="post-header">
		<link rel="stylesheet" href="../css/font_size.css" />
		<link rel="stylesheet" href="../css/figure.css" />
		<link rel="stylesheet" href="../css/topics/button.css" />  <!-- sub in the tag/topic -->
		<link rel="stylesheet" href="../css/modal.css" />
		<link rel="stylesheet" href="../css/post.css" />
		<link rel="stylesheet" href="../css/mascot_effects.css" />

		
		
		<p class="post-meta">
		<time class="dt-published" datetime="2019-04-05T00:00:00-04:00" itemprop="datePublished">Friday, April 5, 2019
		</time>• by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">Ron Tarrant</span></span></p>
	</header>

	<div class="post-content e-content" itemprop="articleBody">
		<div class="skew-line"></div>
		<h1 id="0024-switch-and-lightswitch">0024: Switch and LightSwitch</h1>

<p>For today, we’ll be looking at two code files:</p>

<ul>
  <li>one showing off a Switch widget, and</li>
  <li>the other, a derived class we’ll call the LightSwitch.</li>
</ul>

<p>And what we’ll be playing with is the GTK <code class="language-plaintext highlighter-rouge">Switch</code> widget. First, we’ll get it up and running, then we’ll do something interesting with it. We’ll combine the <code class="language-plaintext highlighter-rouge">Switch</code> with some other widgets to create a light bulb with changeable colours and a reset button.</p>

<h2 id="and-now-a-switch">And Now, a Switch</h2>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img0" src="../images/screenshots/002_button/button_15.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal0" class="modal">																	<!-- modal# -->
				<span class="close0">&times;</span>															<!-- close# -->
				<img class="modal-content" id="img00" />															<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal0");														// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img0");															// img#
			var modalImg = document.getElementById("img00");													// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close0")[0];											// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img1" src="../images/screenshots/002_button/button_15_term.png" alt="Current example terminal output" />		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal1" class="modal">																				<!-- modal# -->
				<span class="close1">&times;</span>																		<!-- close# -->
				<img class="modal-content" id="img11" />																		<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal1");																	// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img1");																		// img#
			var modalImg = document.getElementById("img11");																// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close1")[0];														// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																								<!-- ------------- filename (below) --------- -->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/002_button/button_15_switch.d" target="_blank">here</a>.
	</div>
</div>

<p>I won’t bother going over the <code class="language-plaintext highlighter-rouge">TestRigWindow</code> stuff; I think we all know the ins and outs of that by now. So, let’s start with:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="n">gtk</span><span class="p">.</span><span class="n">Switch</span><span class="p">;</span>
</code></pre></div></div>

<p>That’s the only extra import statement you’ll need for the first example, the plain-jane switch. Now let’s look at the class derived from the <code class="language-plaintext highlighter-rouge">Switch</code>:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">MySwitch</span> <span class="p">:</span> <span class="n">Switch</span>
<span class="p">{</span>
	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="k">super</span><span class="p">();</span>
		<span class="n">addOnStateSet</span><span class="p">(&amp;</span><span class="n">onStateSet</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// this()</span>


	<span class="kt">bool</span> <span class="n">onStateSet</span><span class="p">(</span><span class="kt">bool</span> <span class="n">state</span><span class="p">,</span> <span class="n">Switch</span> <span class="n">s</span><span class="p">)</span>
	<span class="p">{</span>
		<span class="n">setState</span><span class="p">(</span><span class="n">state</span><span class="p">);</span>
		<span class="n">writeln</span><span class="p">(</span><span class="s">"State set is: "</span><span class="p">,</span> <span class="n">getState</span><span class="p">(),</span> <span class="s">" and state is: "</span><span class="p">,</span> <span class="n">state</span><span class="p">);</span>
		
		<span class="k">return</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// onStateSet()</span>
	
<span class="p">}</span> <span class="c1">// class MySwitch</span>
</code></pre></div></div>

<p>For the most part, this is pretty standard stuff. We’ve seen derived classes before and we’ve seen signals hooked up, but what we haven’t seen is an argument list that seems out of order. Take a look at the <code class="language-plaintext highlighter-rouge">onStateSet()</code> function.</p>

<p>First argument is a Boolean value called <code class="language-plaintext highlighter-rouge">state</code>. This is the first widget we’ve examined that passes its state along with the signal. It’s handy because we don’t need to go dig it out with a <code class="language-plaintext highlighter-rouge">getState()</code> function. It’s just there, ready to use in our callback.</p>

<p>As usual, we can ignore the self-referential argument, <code class="language-plaintext highlighter-rouge">Switch s</code>. It’s the same as <code class="language-plaintext highlighter-rouge">Button b</code>, <code class="language-plaintext highlighter-rouge">Widget w</code>, or <code class="language-plaintext highlighter-rouge">Event e</code>, all of which we’ve ignored in setting up callbacks in the past.</p>

<p>In the body of the callback… wait a minute. Why do we get a <code class="language-plaintext highlighter-rouge">state</code>, but then have to set it? Good question.</p>

<p>It seems that whereas we have the convenience of getting the <code class="language-plaintext highlighter-rouge">state</code> packaged with the signal, we still have to muck around to keep things in sync. To do that, we call <code class="language-plaintext highlighter-rouge">setState()</code>.</p>

<h2 id="and-a-lightbulb-ish-thing">And a LightBulb-ish Thing</h2>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img2" src="../images/screenshots/002_button/button_16.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal2" class="modal">																<!-- modal# -->
				<span class="close2">&times;</span>														<!-- close# -->
				<img class="modal-content" id="img22" />														<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal2");													// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img2");														// img#
			var modalImg = document.getElementById("img22");												// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close2")[0];										// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img3" src="../images/screenshots/002_button/button_16_term.png" alt="Current example terminal output" /> 		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal3" class="modal">																			<!-- modal# -->
				<span class="close3">&times;</span>																	<!-- close# -->
				<img class="modal-content" id="img33" />																	<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal3");																// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img3");																	// img#
			var modalImg = document.getElementById("img33");															// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close3")[0];													// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																							<!--------- filename (below) ------------>
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/002_button/button_16_switch_light.d" target="_blank">here</a>.
	</div>
</div>

<p>What’s a <code class="language-plaintext highlighter-rouge">Switch</code> without something to turn on or off?</p>

<p>To get this all happening, we want:</p>

<ul>
  <li>a switch,</li>
  <li>a light bulb, and</li>
  <li>a reset button.</li>
</ul>

<p>The <code class="language-plaintext highlighter-rouge">Switch</code>, we already have from the first exercise. The light bulb can be made from a <code class="language-plaintext highlighter-rouge">ColorButton</code> widget and the reset button from a standard, vanilla-flavored <code class="language-plaintext highlighter-rouge">Button</code>. Let’s first take a quick look at the container these three will be crammed into.</p>

<h3 id="switchbox-class">SwitchBox Class</h3>

<p>As with earlier container examples, the <code class="language-plaintext highlighter-rouge">SwitchBox</code> is where we declare and define all the widgets. Because they’re all derived classes, the names won’t mean much for now. And all we really do here in the <code class="language-plaintext highlighter-rouge">SwitchBox</code> is build the buttons and stuff them in.</p>

<h3 id="lightswitch-class">LightSwitch Class</h3>

<p>This class bears little resemblance to the <code class="language-plaintext highlighter-rouge">MySwitch</code> class of the previous example. For one thing, it has a reference pointer to the <code class="language-plaintext highlighter-rouge">LightBulb</code> class (which we’ll see in a moment) and this we set up by passing in the pointer during the constructor phase. In effect, what this does is allow the <code class="language-plaintext highlighter-rouge">LightSwitch</code> class to behave like an observer.</p>

<p>Next, the <code class="language-plaintext highlighter-rouge">onStateSet()</code> function doesn’t just keep the signal state in sync with the internal state, it takes care of setting the colour of the <code class="language-plaintext highlighter-rouge">LightBulb</code> widget (remember that a <code class="language-plaintext highlighter-rouge">ColorButton</code> displays its colour on the button itself). And before it exits, it updates the state of the <code class="language-plaintext highlighter-rouge">LightBulb</code>’s switch as well so that all states match across both widgets.</p>

<h3 id="lightbulb-class">LightBulb Class</h3>

<p>This <code class="language-plaintext highlighter-rouge">ColorButton</code> is more elaborate than the last one we played with. Instead of just one colour and a default, it’s got an <code class="language-plaintext highlighter-rouge">onColor</code>, an <code class="language-plaintext highlighter-rouge">offColor</code>, and defaults for both. It’s a bit more to track and so the <code class="language-plaintext highlighter-rouge">LightBulb</code> takes on characteristics of the observed to match <code class="language-plaintext highlighter-rouge">LightSwitch</code>’s observer status.</p>

<p>In the constructor, we naturally have some initial housekeeping to do, set both default colours as well as the colours we’ll show the world as the light is switched on or off.</p>

<p>The <code class="language-plaintext highlighter-rouge">switchState()</code> function is called by the observer (the <code class="language-plaintext highlighter-rouge">LightSwitch</code>) to turn the ‘light’ on or off. All it does is check to see which state the <code class="language-plaintext highlighter-rouge">LightBulb</code> is in and switch to the other.</p>

<p>I’ll skip over <code class="language-plaintext highlighter-rouge">getState()</code> as being obvious enough as to not need explanation.</p>

<p>The <code class="language-plaintext highlighter-rouge">setColor()</code> function is the callback as obviated by how we hooked up the <code class="language-plaintext highlighter-rouge">onColorSet</code> signal to it back in the constructor. Because of the nature of the <code class="language-plaintext highlighter-rouge">ColorButton</code>, once the user has set the colour, all we have to do is grab it from the <code class="language-plaintext highlighter-rouge">ColorButton</code>’s internal storage with <code class="language-plaintext highlighter-rouge">getRgba()</code>. Then we’re back to dealing with state, is it true (<code class="language-plaintext highlighter-rouge">ON</code>) or false (<code class="language-plaintext highlighter-rouge">OFF</code>)? Because the colour we’ll set will be the colour used for whichever state is current, on or off, right?</p>

<p>Finally, we have the <code class="language-plaintext highlighter-rouge">reset()</code> function that restores default colours to both on and off states.</p>

<h3 id="resetbutton-class">ResetButton Class</h3>

<p>The last class we’ve defined also tracks the <code class="language-plaintext highlighter-rouge">LightBulb</code> object and works closely with the <code class="language-plaintext highlighter-rouge">reset()</code> function built into the <code class="language-plaintext highlighter-rouge">LightBulb</code>. First it calls the <code class="language-plaintext highlighter-rouge">LightBulb</code>’s <code class="language-plaintext highlighter-rouge">reset()</code> function, then to keep everything else in sync, it sets the <code class="language-plaintext highlighter-rouge">LightBulb</code>’s <code class="language-plaintext highlighter-rouge">onColor</code> and <code class="language-plaintext highlighter-rouge">offColor</code>.</p>

<h2 id="conclusion">Conclusion</h2>

<p>So there you have it, a straightforward example of how to use a Switch widget as well as a more complex example where we give it something somewhat meaningful to do.</p>

<p>Hope this was as interesting to read about as it was to research and write (both the code and the blog entry).</p>

<p>Until next time, happy D-coding and may your Widgets always find their way home.</p>

<div class="blog-nav">
	<div style="float: left;">
		<a href="./0023-radio-and-color-buttons.html">Previous: Radio and Color Buttons</a>
	</div>
	<div style="float: right;">
		<a href="./0025-creating-and-using-a-linkbutton.html">Next: LinkButton</a>
	</div>
</div>
<p>
	<h3></h3>
<div class="inpage-frame">
	<a href="https://github.com/sponsors/rontarrant">
		<BR>
		<BR>
		<B>Is this article useful? Educational? Entertaining, perhaps?</B>
		<BR>
		<figure class="left">
			<img src="../images/favorite_32.png" alt="Sponsorship heart" style="width: 32px; height: 32px;">
		</figure>
		You're free to accept or decline this invitation to become our newest sponsor.
	</a>
</div>
	<h4 class="comment-blurb"><B>Comments? Questions? Observations?</B></h4>
	<p>
		Did we miss a tidbit of information that would make this post even more informative? Let's talk about it in the comments.
	</p>
	<script src="https://utteranc.es/client.js"
		repo="rontarrant"
		issue-term="pathname"
		theme="github-light"
		crossorigin="anonymous"
		async>
	</script>
	<ul>
		<li> come on over to the <a href="https://forum.dlang.org/">D Language Forum</a> and look for one of the <i>gtkDcoding</i> announcement posts, </li>
		<li> drop by <a href="https://forum.gtkd.org/">the <i>GtkD Forum</i></a>,</li>
		<li> follow the link below to email me, or</li>
		<li> go to the	<a href="https://www.facebook.com">gtkDcoding Facebook page.</a></li>
	</ul>
</p>
<p> You can also subscribe <a href="/feed.xml">via RSS</a> so you won't miss anything. Thank you very much for dropping by.</p>
<p>&copy; Copyright 2025 Ron Tarrant </p>
</div>

	<a class="u-url" href="./0024-switch-and-light-switch.html" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">gtkDcoding</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Ron Tarrant</li><li><a class="u-email" href="mailto:gtkDcoding@gmail.com">gtkDcoding@gmail.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/rontarrant"><svg class="svg-icon"><use xlink:href="../assets/minima-social-icons.svg#github"></use></svg> <span class="username">rontarrant</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Simple examples of how to use GtkD to build GUI applications.</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
